<template>
     <div class="clock">
          <!-- 线 -->
          <hr style="width:350px;position:absolute;top:368px;right:0;background-color: #00BFFF;">
          <!-- 时 -->
          <ul class="hour" :style="{transform:'rotate('+hourDeg+'deg)'}">
               <li style="transform:rotate(0deg);"><div>一时</div></li>
               <li style="transform:rotate(-15deg);"><div>二时</div></li>
               <li style="transform:rotate(-30deg);"><div>三时</div></li>
               <li style="transform:rotate(-45deg);"><div>四时</div></li>
               <li style="transform:rotate(-60deg);"><div>五时</div></li>
               <li style="transform:rotate(-75deg);"><div>六时</div></li>
               <li style="transform:rotate(-90deg);"><div>七时</div></li>
               <li style="transform:rotate(-105deg);"><div>八时</div></li>
               <li style="transform:rotate(-120deg);"><div>九时</div></li>
               <li style="transform:rotate(-135deg);"><div>十时</div></li>
               <li style="transform:rotate(-150deg);"><div>十一时</div></li>
               <li style="transform:rotate(-165deg);"><div>十二时</div></li>
               <li style="transform:rotate(-180deg);"><div>十三时</div></li>
               <li style="transform:rotate(-195deg);"><div>十四时</div></li>
               <li style="transform:rotate(-210deg);"><div>十五时</div></li>
               <li style="transform:rotate(-225deg);"><div>十六时</div></li>
               <li style="transform:rotate(-240deg);"><div>十七时</div></li>
               <li style="transform:rotate(-255deg);"><div>十八时</div></li>
               <li style="transform:rotate(-270deg);"><div>十九时</div></li>
               <li style="transform:rotate(-285deg);"><div>二十时</div></li>
               <li style="transform:rotate(-300deg);"><div>二十一时</div></li>
               <li style="transform:rotate(-315deg);"><div>二十二时</div></li>
               <li style="transform:rotate(-330deg);"><div>二十三时</div></li>
               <li style="transform:rotate(-345deg);"><div>二十四时</div></li>
          </ul>
          <!-- 分 -->
          <ul class="minute" :style="{transform:'rotate('+minuteDeg+'deg)'}">
               <li style="transform:rotate(0deg);"><div>一分</div></li>
               <li style="transform:rotate(-6deg);"><div>二分</div></li>
               <li style="transform:rotate(-12deg);"><div>三分</div></li>
               <li style="transform:rotate(-18deg);"><div>四分</div></li>
               <li style="transform:rotate(-24deg);"><div>五分</div></li>
               <li style="transform:rotate(-30deg);"><div>六分</div></li>
               <li style="transform:rotate(-36deg);"><div>七分</div></li>
               <li style="transform:rotate(-42deg);"><div>八分</div></li>
               <li style="transform:rotate(-48deg);"><div>九分</div></li>
               <li style="transform:rotate(-54deg);"><div>十分</div></li>
               <li style="transform:rotate(-60deg);"><div>十一分</div></li>
               <li style="transform:rotate(-66deg);"><div>十二分</div></li>
               <li style="transform:rotate(-72deg);"><div>十三分</div></li>
               <li style="transform:rotate(-78deg);"><div>十四分</div></li>
               <li style="transform:rotate(-84deg);"><div>十五分</div></li>
               <li style="transform:rotate(-90deg);"><div>十六分</div></li>
               <li style="transform:rotate(-96deg);"><div>十七分</div></li>
               <li style="transform:rotate(-102deg);"><div>十八分</div></li>
               <li style="transform:rotate(-108deg);"><div>十九分</div></li>
               <li style="transform:rotate(-114deg);"><div>二十分</div></li>
               <li style="transform:rotate(-120deg);"><div>二十一分</div></li>
               <li style="transform:rotate(-126deg);"><div>二十二分</div></li>
               <li style="transform:rotate(-132deg);"><div>二十三分</div></li>
               <li style="transform:rotate(-138deg);"><div>二十四分</div></li>
               <li style="transform:rotate(-144deg);"><div>二十五分</div></li>
               <li style="transform:rotate(-150deg);"><div>二十六分</div></li>
               <li style="transform:rotate(-156deg);"><div>二十七分</div></li>
               <li style="transform:rotate(-162deg);"><div>二十八分</div></li>
               <li style="transform:rotate(-168deg);"><div>二十九分</div></li>
               <li style="transform:rotate(-174deg);"><div>三十分</div></li>
               <li style="transform:rotate(-180deg);"><div>三十一分</div></li>
               <li style="transform:rotate(-186deg);"><div>三十二分</div></li>
               <li style="transform:rotate(-192deg);"><div>三十三分</div></li>
               <li style="transform:rotate(-198deg);"><div>三十四分</div></li>
               <li style="transform:rotate(-204deg);"><div>三十五分</div></li>
               <li style="transform:rotate(-210deg);"><div>三十六分</div></li>
               <li style="transform:rotate(-216deg);"><div>三十七分</div></li>
               <li style="transform:rotate(-222deg);"><div>三十八分</div></li>
               <li style="transform:rotate(-228deg);"><div>三十九分</div></li>
               <li style="transform:rotate(-234deg);"><div>四十分</div></li>
               <li style="transform:rotate(-240deg);"><div>四十一分</div></li>
               <li style="transform:rotate(-246deg);"><div>四十二分</div></li>
               <li style="transform:rotate(-252deg);"><div>四十三分</div></li>
               <li style="transform:rotate(-258deg);"><div>四十四分</div></li>
               <li style="transform:rotate(-264deg);"><div>四十五分</div></li>
               <li style="transform:rotate(-270deg);"><div>四十六分</div></li>
               <li style="transform:rotate(-276deg);"><div>四十七分</div></li>
               <li style="transform:rotate(-282deg);"><div>四十八分</div></li>
               <li style="transform:rotate(-288deg);"><div>四十九分</div></li>
               <li style="transform:rotate(-294deg);"><div>五十分</div></li>
               <li style="transform:rotate(-300deg);"><div>五十一分</div></li>
               <li style="transform:rotate(-306deg);"><div>五十二分</div></li>
               <li style="transform:rotate(-312deg);"><div>五十三分</div></li>
               <li style="transform:rotate(-318deg);"><div>五十四分</div></li>
               <li style="transform:rotate(-324deg);"><div>五十五分</div></li>
               <li style="transform:rotate(-330deg);"><div>五十六分</div></li>
               <li style="transform:rotate(-336deg);"><div>五十七分</div></li>
               <li style="transform:rotate(-342deg);"><div>五十八分</div></li>
               <li style="transform:rotate(-348deg);"><div>五十九分</div></li>
               <li style="transform:rotate(-354deg);"><div>六十分</div></li>
          </ul>
          <!-- 秒 -->
          <ul class="second" :style="{transform:'rotate('+secondDeg+'deg)'}">
               <li style="transform:rotate(0deg);"><div>一秒</div></li>
               <li style="transform:rotate(-6deg);"><div>二秒</div></li>
               <li style="transform:rotate(-12deg);"><div>三秒</div></li>
               <li style="transform:rotate(-18deg);"><div>四秒</div></li>
               <li style="transform:rotate(-24deg);"><div>五秒</div></li>
               <li style="transform:rotate(-30deg);"><div>六秒</div></li>
               <li style="transform:rotate(-36deg);"><div>七秒</div></li>
               <li style="transform:rotate(-42deg);"><div>八秒</div></li>
               <li style="transform:rotate(-48deg);"><div>九秒</div></li>
               <li style="transform:rotate(-54deg);"><div>十秒</div></li>
               <li style="transform:rotate(-60deg);"><div>十一秒</div></li>
               <li style="transform:rotate(-66deg);"><div>十二秒</div></li>
               <li style="transform:rotate(-72deg);"><div>十三秒</div></li>
               <li style="transform:rotate(-78deg);"><div>十四秒</div></li>
               <li style="transform:rotate(-84deg);"><div>十五秒</div></li>
               <li style="transform:rotate(-90deg);"><div>十六秒</div></li>
               <li style="transform:rotate(-96deg);"><div>十七秒</div></li>
               <li style="transform:rotate(-102deg);"><div>十八秒</div></li>
               <li style="transform:rotate(-108deg);"><div>十九秒</div></li>
               <li style="transform:rotate(-114deg);"><div>二十秒</div></li>
               <li style="transform:rotate(-120deg);"><div>二十一秒</div></li>
               <li style="transform:rotate(-126deg);"><div>二十二秒</div></li>
               <li style="transform:rotate(-132deg);"><div>二十三秒</div></li>
               <li style="transform:rotate(-138deg);"><div>二十四秒</div></li>
               <li style="transform:rotate(-144deg);"><div>二十五秒</div></li>
               <li style="transform:rotate(-150deg);"><div>二十六秒</div></li>
               <li style="transform:rotate(-156deg);"><div>二十七秒</div></li>
               <li style="transform:rotate(-162deg);"><div>二十八秒</div></li>
               <li style="transform:rotate(-168deg);"><div>二十九秒</div></li>
               <li style="transform:rotate(-174deg);"><div>三十秒</div></li>
               <li style="transform:rotate(-180deg);"><div>三十一秒</div></li>
               <li style="transform:rotate(-186deg);"><div>三十二秒</div></li>
               <li style="transform:rotate(-192deg);"><div>三十三秒</div></li>
               <li style="transform:rotate(-198deg);"><div>三十四秒</div></li>
               <li style="transform:rotate(-204deg);"><div>三十五秒</div></li>
               <li style="transform:rotate(-210deg);"><div>三十六秒</div></li>
               <li style="transform:rotate(-216deg);"><div>三十七秒</div></li>
               <li style="transform:rotate(-222deg);"><div>三十八秒</div></li>
               <li style="transform:rotate(-228deg);"><div>三十九秒</div></li>
               <li style="transform:rotate(-234deg);"><div>四十秒</div></li>
               <li style="transform:rotate(-240deg);"><div>四十一秒</div></li>
               <li style="transform:rotate(-246deg);"><div>四十二秒</div></li>
               <li style="transform:rotate(-252deg);"><div>四十三秒</div></li>
               <li style="transform:rotate(-258deg);"><div>四十四秒</div></li>
               <li style="transform:rotate(-264deg);"><div>四十五秒</div></li>
               <li style="transform:rotate(-270deg);"><div>四十六秒</div></li>
               <li style="transform:rotate(-276deg);"><div>四十七秒</div></li>
               <li style="transform:rotate(-282deg);"><div>四十八秒</div></li>
               <li style="transform:rotate(-288deg);"><div>四十九秒</div></li>
               <li style="transform:rotate(-294deg);"><div>五十秒</div></li>
               <li style="transform:rotate(-300deg);"><div>五十一秒</div></li>
               <li style="transform:rotate(-306deg);"><div>五十二秒</div></li>
               <li style="transform:rotate(-312deg);"><div>五十三秒</div></li>
               <li style="transform:rotate(-318deg);"><div>五十四秒</div></li>
               <li style="transform:rotate(-324deg);"><div>五十五秒</div></li>
               <li style="transform:rotate(-330deg);"><div>五十六秒</div></li>
               <li style="transform:rotate(-336deg);"><div>五十七秒</div></li>
               <li style="transform:rotate(-342deg);"><div>五十八秒</div></li>
               <li style="transform:rotate(-348deg);"><div>五十九秒</div></li>
               <li style="transform:rotate(-354deg);"><div>六十秒</div></li>
          </ul>
     </div>
</template>
<script>
export default {
     data(){
          return{
               hourDeg:0,
               minuteDeg:0,
               secondDeg:0,
               nowTime:""
          }
     },
     beforeDestroy() {
          clearInterval(this.nowTime);
     },
     mounted(){
          this.nowTime = setInterval(() => this.init(), 1000);
     },
     methods:{
          init(){
               let nowtime = new Date();
               let year = nowtime.getFullYear() + "";
               let month = nowtime.getMonth() + 1 + "";
               let date = nowtime.getDate() + "";
               let hours = nowtime.getHours() + "";
               if (hours < 10) {
                    hours = 0 + hours;
               }
               let minute = nowtime.getMinutes() + "";
               if (minute < 10) {
                    minute = 0 + minute;
               }
               let second = nowtime.getSeconds() + "";
               if (second < 10) {
                    second = 0 + second;
               }

               if(hours==0) {
                    this.hourDeg= 0
               }else if(hours==1){
                    this.hourDeg= 0
               }else if(hours==2){
                    this.hourDeg= 15
               }else if(hours==3){
                    this.hourDeg= 30
               }else if(hours==4){
                    this.hourDeg= 45
               }else if(hours==5){
                    this.hourDeg= 60
               }else if(hours==6){
                    this.hourDeg= 75
               }else if(hours==7){
                    this.hourDeg= 90
               }else if(hours==8){
                    this.hourDeg= 105
               }else if(hours==9){
                    this.hourDeg= 120
               }else if(hours==10){
                    this.hourDeg= 135
               }else if(hours==11){
                    this.hourDeg= 165
               }else if(hours==12){
                    this.hourDeg= 180
               }else if(hours==13){
                    this.hourDeg= 195
               }else if(hours==14){
                    this.hourDeg= 210
               }else if(hours==15){
                    this.hourDeg= 225
               }else if(hours==16){
                    this.hourDeg= 240
               }else if(hours==17){
                    this.hourDeg= 240
               }else if(hours==18){
                    this.hourDeg= 255
               }else if(hours==19){
                    this.hourDeg= 270
               }else if(hours==20){
                    this.hourDeg= 285
               }else if(hours==21){
                    this.hourDeg= 300
               }else if(hours==22){
                    this.hourDeg= 315
               }else if(hours==23){
                    this.hourDeg= 330
               }else{
                    this.hourDeg= 345
               }


               if(minute==0) {
                    this.minuteDeg= 0
               }else if(minute==1){
                    this.minuteDeg= 0
               }else if(minute==2){
                    this.minuteDeg= 6
               }else if(minute==3){
                    this.minuteDeg= 12
               }else if(minute==4){
                    this.minuteDeg= 18
               }else if(minute==5){
                    this.minuteDeg= 24
               }else if(minute==6){
                    this.minuteDeg= 30
               }else if(minute==7){
                    this.minuteDeg= 36
               }else if(minute==8){
                    this.minuteDeg= 42
               }else if(minute==9){
                    this.minuteDeg= 48
               }else if(minute==10){
                    this.minuteDeg= 54
               }else if(minute==11){
                    this.minuteDeg= 60
               }else if(minute==12){
                    this.minuteDeg= 66
               }else if(minute==13){
                    this.minuteDeg= 72
               }else if(minute==14){
                    this.minuteDeg= 78
               }else if(minute==15){
                    this.minuteDeg= 84
               }else if(minute==16){
                    this.minuteDeg= 90
               }else if(minute==17){
                    this.minuteDeg= 96
               }else if(minute==18){
                    this.minuteDeg= 102
               }else if(minute==19){
                    this.minuteDeg= 108
               }else if(minute==20){
                    this.minuteDeg= 114
               }else if(minute==21){
                    this.minuteDeg= 120
               }else if(minute==22){
                    this.minuteDeg= 126
               }else if(minute==23){
                    this.minuteDeg= 132
               }else if(minute==24){
                    this.minuteDeg= 138
               }else if(minute==25){
                    this.minuteDeg= 144
               }else if(minute==26){
                    this.minuteDeg= 150
               }else if(minute==27){
                    this.minuteDeg= 156
               }else if(minute==28){
                    this.minuteDeg= 162
               }else if(minute==29){
                    this.minuteDeg= 168
               }else if(minute==30){
                    this.minuteDeg= 174
               }else if(minute==31){
                    this.minuteDeg= 180
               }else if(minute==32){
                    this.minuteDeg= 186
               }else if(minute==33){
                    this.minuteDeg= 192
               }else if(minute==34){
                    this.minuteDeg= 198
               }else if(minute==35){
                    this.minuteDeg= 204
               }else if(minute==36){
                    this.minuteDeg= 210
               }else if(minute==37){
                    this.minuteDeg= 216
               }else if(minute==38){
                    this.minuteDeg= 222
               }else if(minute==39){
                    this.minuteDeg= 228
               }else if(minute==40){
                    this.minuteDeg= 234
               }else if(minute==41){
                    this.minuteDeg= 240
               }else if(minute==42){
                    this.minuteDeg= 246
               }else if(minute==43){
                    this.minuteDeg= 252
               }else if(minute==44){
                    this.minuteDeg= 258
               }else if(minute==45){
                    this.minuteDeg= 264
               }else if(minute==46){
                    this.minuteDeg= 270
               }else if(minute==47){
                    this.minuteDeg= 276
               }else if(minute==48){
                    this.minuteDeg= 282
               }else if(minute==49){
                    this.minuteDeg= 288
               }else if(minute==50){
                    this.minuteDeg= 294
               }else if(minute==51){
                    this.minuteDeg= 300
               }else if(minute==52){
                    this.minuteDeg= 306
               }else if(minute==53){
                    this.minuteDeg= 312
               }else if(minute==54){
                    this.minuteDeg= 318
               }else if(minute==55){
                    this.minuteDeg= 324
               }else if(minute==56){
                    this.minuteDeg= 330
               }else if(minute==57){
                    this.minuteDeg= 336
               }else if(minute==58){
                    this.minuteDeg= 342
               }else if(minute==59){
                    this.minuteDeg= 348
               }


               if(second==0) {
                    this.secondDeg= 0
               }else if(second==1){
                    this.secondDeg= 0
               }else if(second==2){
                    this.secondDeg= 6
               }else if(second==3){
                    this.secondDeg= 12
               }else if(second==4){
                    this.secondDeg= 18
               }else if(second==5){
                    this.secondDeg= 24
               }else if(second==6){
                    this.secondDeg= 30
               }else if(second==7){
                    this.secondDeg= 36
               }else if(second==8){
                    this.secondDeg= 42
               }else if(second==9){
                    this.secondDeg= 48
               }else if(second==10){
                    this.secondDeg= 54
               }else if(second==11){
                    this.secondDeg= 60
               }else if(second==12){
                    this.secondDeg= 66
               }else if(second==13){
                    this.secondDeg= 72
               }else if(second==14){
                    this.secondDeg= 78
               }else if(second==15){
                    this.secondDeg= 84
               }else if(second==16){
                    this.secondDeg= 90
               }else if(second==17){
                    this.secondDeg= 96
               }else if(second==18){
                    this.secondDeg= 102
               }else if(second==19){
                    this.secondDeg= 108
               }else if(second==20){
                    this.secondDeg= 114
               }else if(second==21){
                    this.secondDeg= 120
               }else if(second==22){
                    this.secondDeg= 126
               }else if(second==23){
                    this.secondDeg= 132
               }else if(second==24){
                    this.secondDeg= 138
               }else if(second==25){
                    this.secondDeg= 144
               }else if(second==26){
                    this.secondDeg= 150
               }else if(second==27){
                    this.secondDeg= 156
               }else if(second==28){
                    this.secondDeg= 162
               }else if(second==29){
                    this.secondDeg= 168
               }else if(second==30){
                    this.secondDeg= 174
               }else if(second==31){
                    this.secondDeg= 180
               }else if(second==32){
                    this.secondDeg= 186
               }else if(second==33){
                    this.secondDeg= 192
               }else if(second==34){
                    this.secondDeg= 198
               }else if(second==35){
                    this.secondDeg= 204
               }else if(second==36){
                    this.secondDeg= 210
               }else if(second==37){
                    this.secondDeg= 216
               }else if(second==38){
                    this.secondDeg= 222
               }else if(second==39){
                    this.secondDeg= 228
               }else if(second==40){
                    this.secondDeg= 234
               }else if(second==41){
                    this.secondDeg= 240
               }else if(second==42){
                    this.secondDeg= 246
               }else if(second==43){
                    this.secondDeg= 252
               }else if(second==44){
                    this.secondDeg= 258
               }else if(second==45){
                    this.secondDeg= 264
               }else if(second==46){
                    this.secondDeg= 270
               }else if(second==47){
                    this.secondDeg= 276
               }else if(second==48){
                    this.secondDeg= 282
               }else if(second==49){
                    this.secondDeg= 288
               }else if(second==50){
                    this.secondDeg= 294
               }else if(second==51){
                    this.secondDeg= 300
               }else if(second==52){
                    this.secondDeg= 306
               }else if(second==53){
                    this.secondDeg= 312
               }else if(second==54){
                    this.secondDeg= 318
               }else if(second==55){
                    this.secondDeg= 324
               }else if(second==56){
                    this.secondDeg= 330
               }else if(second==57){
                    this.secondDeg= 336
               }else if(second==58){
                    this.secondDeg= 342
               }else if(second==59){
                    this.secondDeg= 348
               }
          }
     }
}
</script>
<style scoped lang="scss">
    .clock{
        width:700px;
        height:700px;
        margin: 100px auto;
        position: relative;
        clear: both;
        padding:0;
        background-color: beige;
    }
    ul,li{
        list-style: none;
    }
    .hour{
        position: absolute;
        width:320px;
        height:20px;
        top:340px;
        left:190px;
        padding:0;
         li{
            position: absolute;
            width:100%;
            right:0;
            top:0;
            div{
                float:right;
                width:90px;
                text-align: right;
            }
        }
    }
    .minute{
        position: absolute;
        width:520px;
        height:20px;
        top:340px;
        left:90px;
        padding:0;
          li{
            position: absolute;
            width:100%;
            right:0;
            top:0;
            div{
                float:right;
                width:90px;
                text-align: right;
            }
        }
    }
    .second{
        position: absolute;
        width:680px;
        height:20px;
        top:340px;
        left:10px;
        padding:0;
        li{
            position: absolute;
            width:100%;
            right:0;
            top:0;
            div{
                float:right;
                width:90px;
                text-align: right;
            }
        }
    }
</style>
